{extend name="sitehome@style/base"/}
{block name="resources"}
<link rel="stylesheet" href="STATIC_EXT/color_picker/css/colorpicker.css" />
{/block}
{block name="main"}
<div class="layui-form" lay-filter="upload_config">
	<div class="nc-quote-box">
        <blockquote class="layui-elem-quote layui-quote-nm">水印设置</blockquote>
        <div class="layui-form-item config-set">
            <label class="layui-form-label">是否开启水印</label>
            <div class="layui-input-block">
                <input type="checkbox" value="1" {if condition="$info.watermark.is_open_watermark==1"} checked="" {/if} name="is_open_watermark" lay-skin="switch" lay-filter="switchTest">
            </div>
            <div class="layui-form-mid layui-word-aux">设置为不开启则上传的图片不执行添加水印操作</div>
        </div>
        <div class="layui-form-item config-set watermarking-form">
            <label class="layui-form-label">水印形式</label>
            <div class="layui-input-inline">
                <input type="radio" name="watermark_type" lay-filter="watermark_type" value="1" title="图片" {if $info.watermark.watermark_type eq 1}checked{/if}>
                <input type="radio" name="watermark_type" lay-filter="watermark_type" value="2" title="文字" {if $info.watermark.watermark_type eq 2}checked{/if}>
            </div>
        </div>
        <div class="layui-form-item  config-set watermark-img ">
            <label class="layui-form-label img-upload-lable">水印图片</label>
            <div class="layui-inline img-upload">
                <input type="hidden" class="layui-input" name = "watermark_image" value="{$info.watermark.watermark_image}" />
                <div class="upload-img-block watermark_image">
                    {if empty($info.watermark.watermark_image)}
                    <div class="upload-img-box" onclick="uploadSinglewatermark_image()" >
                        <div>
                            <i class="add">+</i>
                        </div>
                    </div>
                    {else/}
                    <div class="upload-img-box has-choose-image">
                        <div>
                            <img src="{:img($info.watermark.watermark_image)}" layer-src="{:img($info.watermark.watermark_image)}">
                        </div>
                        <span onclick="uploadSinglewatermark_image();">修改</span>
                    </div>
                    {/if}
                </div>
                {:hook("fileUpload", ['name' => 'watermark_image', 'type' => 'common', 'file_type' => 'IMAGE', 'size' => '2000', 'thumb_type' => 'pic'], '', true)}

            </div>
        </div>
        <div class="layui-form-item config-set watermark-text">
            <label class="layui-form-label">水印文字</label>
            <div class="layui-inline">
                <div class="layui-input-inline nc-len-mid">
                    <input type="text" name="watermark_text"  autocomplete="off" class="layui-input" value="{if empty($info.watermark.watermark_text)}{else/}{$info.watermark.watermark_text}{/if}"/>
                </div>
            </div>
        </div>
        <div class="layui-form-item  config-set watermark-img">
            <label class="layui-form-label">水印透明度</label>
            <div class="layui-inline">
                <div class="layui-input-inline nc-len-short">
                    <input type="text" name="transparence" autocomplete="off" class="layui-input" value="{if $info.watermark.transparence eq ''}0{else/}{$info.watermark.transparence}{/if}"/>
                </div>
                <div class="layui-form-mid">%</div>

            </div>
        </div>
        <div class="layui-form-item config-set watermark-text">
            <label class="layui-form-label">水印文字大小</label>
            <div class="layui-inline">
                <div class="layui-input-inline nc-len-short">
                    <input type="text" name="watermark_fontsize" autocomplete="off" class="layui-input" value="{if empty($info.watermark.watermark_fontsize)}12{else/}{$info.watermark.watermark_fontsize}{/if}"/>
                </div>
            </div>
        </div>

        <div class="layui-form-item config-set watermark-text">
            <label class="layui-form-label">文字偏移量</label>
            <div class="layui-inline">
                <div class="layui-input-inline nc-len-short">
                    <input type="text" name="watermark_offset"  autocomplete="off" class="layui-input" value="{$info.watermark.watermark_offset}"/>
                </div>
            </div>
        </div>
        <div class="layui-form-item config-set watermark-text">
            <label class="layui-form-label">文字倾斜角度</label>
            <div class="layui-input-inline">
                <input type="text" name="watermark_angle"  autocomplete="off" class="layui-input nc-len-short" value="{$info.watermark.watermark_angle}"/>
            </div>
            <div class="layui-form-mid">度</div>

        </div>
        <div class="layui-form-item  config-set watermark-text">
            <label class="layui-form-label">水印文字颜色</label>
             <div class="layui-input-inline">
                <input type="text" value="{$info.watermark.watermark_color}" placeholder="请选择颜色" class="layui-input nc-len-short" name="watermark_color">
              </div>
              <div class="layui-inline">
                <div id="water_color"></div>
              </div>
        </div>

        <div class="layui-form-item  config-set" pane="">
            <label class="layui-form-label">水印位置</label>
            <div class="layui-input-block">
                <input type="radio" name="watermark_position" lay-skin="primary" title="左上角" value="1" {if $info.watermark.watermark_position eq 1}checked{/if}>
                <input type="radio" name="watermark_position" lay-skin="primary" title="上居中  "value="2" {if $info.watermark.watermark_position eq 2}checked{/if}>
                <input type="radio" name="watermark_position" lay-skin="primary" title="右上角" value="3" {if $info.watermark.watermark_position eq 3}checked{/if}>
                <input type="radio" name="watermark_position" lay-skin="primary" title="左居中" value="4" {if $info.watermark.watermark_position eq 4}checked{/if}>
                <input type="radio" name="watermark_position" lay-skin="primary" title="居中  "value="5" {if $info.watermark.watermark_position eq 5}checked{/if}>
                <input type="radio" name="watermark_position" lay-skin="primary" title="右居中  "value="6" {if $info.watermark.watermark_position eq 6}checked{/if}>
                <input type="radio" name="watermark_position" lay-skin="primary" title="左下角  "value="7" {if $info.watermark.watermark_position eq 7}checked{/if}>
                <input type="radio" name="watermark_position" lay-skin="primary" title="下居中  "value="8" {if $info.watermark.watermark_position eq 8}checked{/if}>
                <input type="radio" name="watermark_position" lay-skin="primary" title="右下角  "value="9" {if $info.watermark.watermark_position eq 9}checked{/if}>
            </div>
        </div>
	</div>
	<div class="nc-quote-box">
        <blockquote class="layui-elem-quote layui-quote-nm">图片裁剪设置</blockquote>

        <div class="layui-form-item  config-set" pane="">
            <label class="layui-form-label">裁剪设置</label>
            <div class="layui-input-block">
                <input type="radio" name="thumb_type"  title="居中裁剪" value="3" {if $info.thumb.thumb_type eq 3}checked{/if}>
                <input type="radio" name="thumb_type"  title="等比例缩放" value="1"{if $info.thumb.thumb_type eq 1}checked{/if}>
                <input type="radio" name="thumb_type"  title="缩放后填充"value="2"{if $info.thumb.thumb_type eq 2}checked{/if}>
                <input type="radio" name="thumb_type"  title="左上角裁剪  "value="4"{if $info.thumb.thumb_type eq 4}checked{/if}>
                <input type="radio" name="thumb_type"  title="右下角裁剪"value="5"{if $info.thumb.thumb_type eq 5}checked{/if}>
                <input type="radio" name="thumb_type"  title="固定尺寸缩放"value="6"{if $info.thumb.thumb_type eq 6}checked{/if}>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">裁剪大图规格</label>
            <label class="layui-form-mid ">宽</label>
            <div class="layui-input-inline">
                <input type="text" name="big_width" placeholder="宽" autocomplete="off" class="layui-input nc-len-short" value="{$info.thumb.thumb_spec.big_width}">
            </div>
            <div class="layui-form-mid">高</div>
            <div class="layui-input-inline">
                <input type="text" name="big_height" placeholder="高" autocomplete="off" class="layui-input nc-len-short" value="{$info.thumb.thumb_spec.big_height}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">裁剪中图规格</label>
            <label class="layui-form-mid">宽</label>
            <div class="layui-input-inline">
                <input type="text" name="mid_width" placeholder="宽" autocomplete="off" class="layui-input nc-len-short" value="{$info.thumb.thumb_spec.mid_width}">
            </div>
            <div class="layui-form-mid">高</div>
            <div class="layui-input-inline">
                <input type="text" name="mid_height" placeholder="高" autocomplete="off" class="layui-input nc-len-short" value="{$info.thumb.thumb_spec.mid_height}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">裁剪小图规格</label>
            <label class="layui-form-mid width-small">宽</label>
            <div class="layui-input-inline">
                <input type="text" name="small_width" placeholder="宽" autocomplete="off" class="layui-input nc-len-short" value="{$info.thumb.thumb_spec.small_width}">
            </div>
            <div class="layui-form-mid width-small">高</div>
            <div class="layui-input-inline">
                <input type="text" name="small_height" placeholder="高" autocomplete="off" class="layui-input nc-len-short" value="{$info.thumb.thumb_spec.small_height}">
            </div>
        </div>
        <div class="nc-form-row">
            <button type="button" class="layui-btn" lay-submit lay-filter="save">保存</button>
            <button class="layui-btn layui-btn-primary" onclick="javascript:history.go(-1);">返回</button>
        </div>
	</div>
</div>

<script type="text/html" id="title">
	<span>{{d.info.title}}</span>
</script>

<script type="text/html" id="status">
	<input type="checkbox" name="status" value="{{d.config.name}}" lay-skin="switch" lay-filter="status" {{ d.config.status==1 ? 'checked' : '' }}>
</script>

<script type="text/html" id="operation">
	<a href="{{d.info.url}}"class="default" lay-event="edit">编辑</a>
</script>

{/block}
{block name="script"}
<script src="STATIC_EXT/color_picker/js/colorpicker.js"></script>
<script>
layui.use(['form','colorpicker'], function() {

	var form = layui.form;
	var colorpicker = layui.colorpicker;
	colorpicker.render({
		elem: '#water_color',  //绑定元素
		color: "{$info.watermark.watermark_color}",
		size: 'xs', //mini下拉框
		format: "hex",
		done: function (color) {
			$("input[name='watermark_color']").val(color);
			//譬如你可以在回调中把得到的 color 赋值给表单
		}
	});

    form.on('radio(watermark_type)', function(data){
        if(data.value == 1){
            // $(".watermark-img").show();
            // $(".watermark-text").hide();
        }

        if(data.value == 2){
            // $(".watermark-text").show();
            // $(".watermark-img").hide();
        }
    });
	
	var repeat_flag = false;//防重复标识
	form.on('submit(save)', function (data) {
		if (repeat_flag) return;
		repeat_flag = true;
		$.ajax({
			type: "post",
			async: false,
			url: '{:addon_url("File://sitehome/config/config")}',
			data: data.field,
			dataType: "JSON",
			success: function (data) {
				layer.msg(data.message);
				if (data.code == 0) {
					location.reload();
				} else {
					repeat_flag = false;
				}
				
			}
		});
	});
	
});

$(function(){
	$(".colorSelector").ColorPicker({
        onChange: function(hsb, hex, rgb) {
            $('.colorSelector div').css('backgroundColor', '#' + hex);
            $('.colorSelector input').val('#' + hex);
        }
    });
});

/**
 * 单图回调事件
 */
function singleImageUploadSuccess(res,name){
  if(name == "watermark_image"){
      $(".watermark_image").html('<div class="upload-img-box has-choose-image"><div><img src="'+nc.img(res.path)+'" layer-src="'+nc.img(res.path)+'"></div><span onclick="uploadSinglewatermark_image();">修改</span></div>');
      $("input[name='watermark_image']").val(res.path);
  }
}
</script>
{/block}